<template>
  <div class="select_address_wrap">
    <div class="air_wrap"></div>
    <div class="select_wrap">
      <div class="title">
        <h3>Selection area</h3>
        <span @click="close">
          <i class="iconfont icon-close"></i>
        </span>
      </div>
      <div class="select_title">
        <span :class="{'no_select': selectResult.length === 0}" @click="clearTitle(0)">{{ selectResult[0] || defaultName }}</span>
        <span :class="{'no_select': selectResult.length === 1}" @click="clearTitle(1)" v-show="selectResult.length > 0">{{ selectResult[1] || defaultName }}</span>
        <span :class="{'no_select': selectResult.length === 2}" @click="clearTitle(2)" v-show="selectResult.length > 1">{{ selectResult[2] || defaultName }}</span>
      </div>
      <transition-group name="list" tag="div" class="test">
        <!-- Each province is one.UL -->
        <ul v-for="(province, index) in addressData" :key="index" class="ul1" :class="{'hide': selectResult.length > 0}">
          <li @click="select(province.name, 0)">{{ province.name }}</li>
          <!-- Every city is a city.UL -->
          <ul v-for="city in province.city" :key="city.name" class="ul2" v-show="selectResult[0] === province.name" :class="{hide: selectResult.length > 1}">
            <li @click="select(city.name, 1)">{{ city.name }}</li>
            <!-- The districts of each county form one.UL -->
            <ul class="ul3" :key="city.name" v-show="selectResult[1] === city.name" :class="{hide: selectResult.length > 2}">
              <li v-for="(area, index) in city.area" @click="select(area, 2, index)" :key="index">{{area}}</li>
            </ul>
          </ul>
        </ul>
      </transition-group>
    </div>
  </div>
</template>
<script>
import areaJson from '../json/area.json';
export default {
  name: 'selectAddress',
  props: ['address'],
  data () {
    return {
      defaultName: 'Please choose',
      selectResult: [], // Selection results
      addressData: areaJson
    };
  },
  methods: {
    // Click on the head to re select.
    clearTitle (index) {
      this.selectResult.splice(index);
    },
    // Click on each item.
    select (obj, index) {
      this.selectResult.push(obj);
      if (this.selectResult.length === 3) this.close();
      this.address.callBack(this.selectResult);
    },
    close () {
      this.$store.commit('hideModal');
    }
  }
};
</script>
<style lang='scss' scoped>
  @import '../style/mixin.scss';
  .select_address_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-size: 24px;
    background-color: rgba(0, 0, 0, 0.2);
    .air_wrap {
      height: 396px;
    }
    .list-move {
      transition: transform 0.6s;
    }
    .test {
      li{
        color: #666;
        // width: calc(100% - 40px);
        padding-left: 20px;
        padding-right: 20px;
      }
      height: calc(100% - 161px);
      overflow: scroll;
      ul{
        position: relative;
        margin-top: 0px;
        &.hide>li{
          display: none;
        }
        li{
          background-color: white;
          height: 80px;
          line-height: 80px;
          // border-bottom: 1px solid #eaeaea;
        }
      }
    }
  }
  // Three Address
  .select_wrap{
    height: calc(100% - 396px);
    .title{
      font-size: 30px;
      color: #333;
      width: 100%;
      text-align: center;
      height: 80px;
      line-height: 80px;
      background-color: white;
      border-bottom: 1px solid #e6e6e6;
      position: relative;
      h3{
        font-weight: normal;
      }
      span{
        position: absolute;
        right: 30px;
        top: 40px;
        transform: translateY(-50%);
        .iconfont{
          font-size: 30px;
          color: #666;
        }
      }
    }
    .select_title{
      color: #333;
      font-size: 24px;
      height: 80px;
      line-height: 80px;
      padding: 0 20px;
      background-color: white;
      border-bottom: 1px solid #e6e6e6;
      >span{
        margin-right: 20px;
        height: 80px;
        display: inline-block;
        line-height: 80px;
        &.no_select{
          color: $with;
          border-bottom: 4px solid $with;
          margin-top: -4px;
        }
      }
    }
  }
</style>
